<script>
export default {
  name: "WaimaiCashback",
  props: {
    scrollMenu: {
      type: Boolean,
      default: false
    },
    WaimaiCurrent: {
      type: Number,
      default: 0
    },
    scHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      catelist: [], //分类列表数据
    }
  },
  mounted() {
    // 获取分类列表数据
    this.getCategoryFun()
  },
  methods: {
    // 点击分类刷新列表
    navbarChange(item, index){
      this.$emit("navbarChange", item, index)
    },
    // 获取分类列表数据
    getCategoryFun() {
      let that = this;
      that.$api.GetOfficialReturnCategoryAPI().then(res => {
        if (res.data.code === 200){
          that.catelist = res.data.result
        }
      })
      console.log('分类数据==', that.catelist)
    },
  }
}
</script>

<template>
  <view class="cashback_box">
    <!--官返分类横向滚动 v-if="scHeight > 520"-->
    <scroll-view  class="uni-swiper-tab" scroll-x>
      <view class="cashback_navbar">
        <view class="cashback_navbar_item" v-for="(item, index) in catelist" :key="index" @click="navbarChange(item, index)">
          <image v-if="!scrollMenu" class="nav-icon" :src="item.image"></image>
          <view class="menu_text" :class="[index===WaimaiCurrent?'menu_text_click':'menu_text_no_click']">{{ item.name }}</view>
        </view>
      </view>
    </scroll-view>
    <!--<u-grid v-else :col="4" :border="false" class="cashback_navbar">
      <u-grid-item v-for="(item, index) in catelist" :key="index" @click="navbarChange(item, index)" bg-color="transparent" :custom-style="{padding: '20rpx 0'}" class="cashback_navbar_item">
        <image v-if="!scrollMenu" class="nav-icon" :src="item.image" style="width: 88rpx; height: 88rpx;"></image>
        <view class="menu_text">{{ item.name }}</view>
      </u-grid-item>
    </u-grid>-->
  </view>
</template>

<style scoped lang="scss">
.cashback_box{
  width: 100%;

}
.uni-swiper-tab{
  white-space: nowrap;

  .cashback_navbar{
    height: 100%;
    .cashback_navbar_item{
      margin: 34rpx 44rpx 0 0;
      display: inline-block;
      text-align: center;
      .nav-icon{
        width: 96rpx;
        height: 96rpx;
      }
      .menu_text{
        font-size: 24rpx;
        color: #3D3D3D;
        line-height: 40rpx;
        display: block;
      }
      .menu_text_click {
        color: #FF7900;
        /* border: 1px solid #FFBB7D;
        background: #FFF7EF; */
      }
      .menu_text_no_click{
        color: #666666;
      }
    }
    .cashback_navbar_item:first-child{
      padding-left: 30rpx;
    }
  }
}

</style>